<template>
  <div>
    <div v-for="(value, key) in values" :key="key" class="progress-container">
      <input type="range" min="0" max="100" v-model.number="values[key]" @input="updateValues">
      <span>{{ percentages[key] }}</span>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';

const values = reactive({
  a: 0,
  b: 0,
  c: 0,
  d: 0,
  e: 0,
  f: 0
});

const total = computed(() => {
  return Object.values(values).reduce((acc, value) => acc + value, 0);
});

const percentages = computed(() => {
  let result = {};
  for (let key in values) {
    result[key] = total.value > 0 ? ((values[key] / total.value) * 100).toFixed(2) + '%' : '0%';
  }
  return result;
});

function updateValues() {
  // This function gets triggered on input, but the actual calculation is handled by Vue reactivity
}
</script>

<style>
.progress-container {
  margin-bottom: 10px;
}
</style>